<template>
  <div class="container" style="padding-top:20px;padding-bottom:20px;">
    <div>
      <apptitle titleName="营业执照"></apptitle>
      <div>
        <Row>
          <i-col span="10" offset="3">
            <Form :model="formItem" :label-width="200">
              <FormItem label="上传营业执照">
                <Upload
                  ref="upload"
                  :show-upload-list="false"
                  :default-file-list="defaultList"
                  :on-success="handleSuccess"
                  :format="['jpg','jpeg','png']"
                  :max-size="2048"
                  :on-format-error="handleFormatError"
                  :on-exceeded-size="handleMaxSize"
                  :before-upload="handleBeforeUpload"
                  multiple
                  type="drag"
                  action="//jsonplaceholder.typicode.com/posts/"
                  style="display: inline-block;width:300px;"
                >
                  <div style="width: 300px;height:200px;line-height: 200px;margin:0 auto;">
                    <Icon type="ios-camera" size="50"></Icon>
                  </div>
                </Upload>
                <Modal title="View Image" v-model="visible">
                  <img
                    :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'"
                    v-if="visible"
                    style="width: 100%"
                  />
                </Modal>
                <p style="width:500px" class="desc-text">仅支持JPG、JPEG、PNG格式，文件小于10M</p>
              </FormItem>
            </Form>
          </i-col>
        </Row>
      </div>
    </div>

    <apptitle titleName="认证人信息"></apptitle>
    <div class="marginT20">
      <Row>
        <i-col span="10" offset="3">
          <Form :model="formItem" :label-width="200">
            <FormItem label="请选择您的身份">
              <RadioGroup v-model="formItem.radio">
                <Radio label="male">法定代表人</Radio>
                <Radio label="female">非法定代表人</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="法定代表人姓名">
              <i-input v-model="formItem.input" placeholder="请填写法定代表人姓名"></i-input>
            </FormItem>
            <FormItem label="法定代表人身份证号">
              <i-input placeholder="请填写法定代表人身份证号"></i-input>
            </FormItem>
            <FormItem label="法定代表人身份证照片">
              <Upload
                ref="upload"
                :show-upload-list="false"
                :default-file-list="defaultList"
                :on-success="handleSuccess"
                :format="['jpg','jpeg','png']"
                :max-size="2048"
                :on-format-error="handleFormatError"
                :on-exceeded-size="handleMaxSize"
                :before-upload="handleBeforeUpload"
                multiple
                type="drag"
                action="//jsonplaceholder.typicode.com/posts/"
                style="display: inline-block;width:300px;"
              >
                <div style="width: 300px;height:200px;line-height: 200px;margin:0 auto;">
                  <Icon type="ios-camera" size="50"></Icon>
                </div>
              </Upload>
              <Modal title="View Image" v-model="visible">
                <img
                  :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'"
                  v-if="visible"
                  style="width: 100%"
                />
              </Modal>
            </FormItem>
            <FormItem>
              <Upload
                ref="upload"
                :show-upload-list="false"
                :default-file-list="defaultList"
                :on-success="handleSuccess"
                :format="['jpg','jpeg','png']"
                :max-size="2048"
                :on-format-error="handleFormatError"
                :on-exceeded-size="handleMaxSize"
                :before-upload="handleBeforeUpload"
                multiple
                type="drag"
                action="//jsonplaceholder.typicode.com/posts/"
                style="display: inline-block;width:300px;"
              >
                <div style="width: 300px;height:200px;line-height: 200px;margin:0 auto;">
                  <Icon type="ios-camera" size="50"></Icon>
                </div>
              </Upload>
              <Modal title="View Image" v-model="visible">
                <img
                  :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'"
                  v-if="visible"
                  style="width: 100%"
                />
              </Modal>
              <p style="width:600px">
                <span style="color:#EC0000">注：请您上传清晰、真实的照片，</span>
                <span class="text-center desc-text">仅支持JPG、JPEG、PNG格式，文件小于10M</span>
              </p>
            </FormItem>
            <FormItem label="账号管理人姓名">
              <i-input v-model="formItem.input" placeholder="请填写法定代表人手机号"></i-input>
            </FormItem>
            <FormItem label="称谓">
              <RadioGroup v-model="formItem.radio">
                <Radio label="male">法定代表人</Radio>
                <Radio label="female">非法定代表人</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="账号管理人身份证号">
              <i-input v-model="formItem.input" placeholder="请填写法定代表人手机号"></i-input>
            </FormItem>
            <FormItem label="账号管理人身份证照片">
              <Upload
                ref="upload"
                :show-upload-list="false"
                :default-file-list="defaultList"
                :on-success="handleSuccess"
                :format="['jpg','jpeg','png']"
                :max-size="2048"
                :on-format-error="handleFormatError"
                :on-exceeded-size="handleMaxSize"
                :before-upload="handleBeforeUpload"
                multiple
                type="drag"
                action="//jsonplaceholder.typicode.com/posts/"
                style="display: inline-block;width:300px;"
              >
                <div style="width: 300px;height:200px;line-height: 200px;margin:0 auto;">
                  <Icon type="ios-camera" size="50"></Icon>
                </div>
              </Upload>
              <Modal title="View Image" v-model="visible">
                <img
                  :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'"
                  v-if="visible"
                  style="width: 100%"
                />
              </Modal>
            </FormItem>
            <FormItem>
              <Upload
                ref="upload"
                :show-upload-list="false"
                :default-file-list="defaultList"
                :on-success="handleSuccess"
                :format="['jpg','jpeg','png']"
                :max-size="2048"
                :on-format-error="handleFormatError"
                :on-exceeded-size="handleMaxSize"
                :before-upload="handleBeforeUpload"
                multiple
                type="drag"
                action="//jsonplaceholder.typicode.com/posts/"
                style="display: inline-block;width:300px;"
              >
                <div style="width: 300px;height:200px;line-height: 200px;margin:0 auto;">
                  <Icon type="ios-camera" size="50"></Icon>
                </div>
              </Upload>
              <Modal title="View Image" v-model="visible">
                <img
                  :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'"
                  v-if="visible"
                  style="width: 100%"
                />
              </Modal>
              <p style="width:600px">
                <span style="color:#EC0000">注：请您上传清晰、真实的照片，</span>
                <span class="text-center desc-text">仅支持JPG、JPEG、PNG格式，文件小于10M</span>
              </p>
            </FormItem>
            <FormItem label="账号管理人手机号">
              <i-input v-model="formItem.input" placeholder="请填写法定代表人手机号"></i-input>
            </FormItem>

            <FormItem label="短信验证码">
              <Row>
                <i-col span="18">
                  <i-input type="text" placeholder="请填写短信验证码"></i-input>
                </i-col>
                <i-col span="4" offset="1">
                  <Button>获取验证码</Button>
                </i-col>
              </Row>
            </FormItem>
          </Form>
        </i-col>
      </Row>
    </div>
    <apptitle titleName="企业信息"></apptitle>

    <div class="marginT10">
      <p class="text-center">系统将根据您上传的营业执照自动识别以下信息，识别成功请核对；如因网络原因识别失败，请手动填写</p>
      <Row class="marginT20">
        <i-col span="10" offset="3">
          <Form :label-width="200">
            <FormItem label="企业名称">
              <i-input v-model="formItem.input" placeholder="请填写企业名称"></i-input>
            </FormItem>
            <FormItem label="统一社会信用代码">
              <i-input placeholder="请填写统一社会信用代码"></i-input>
            </FormItem>
            <FormItem label="注册资本（万）">
              <i-input v-model="formItem.input" placeholder="请填写注册资本"></i-input>
            </FormItem>
            <FormItem label="企业地址">
              <Cascader :data="data" v-model="value1"></Cascader>
            </FormItem>
            <FormItem label="详细地址">
              <i-input v-model="formItem.input" placeholder="请填写企业详细地址"></i-input>
            </FormItem>
          </Form>
        </i-col>
      </Row>
    </div>
    <div>
      <Row>
        <i-col span="2" offset="8">
          <Button @click="save" type="success">保存</Button>
        </i-col>
        <i-col span="2">
          <Button>返回</Button>
        </i-col>
      </Row>
    </div>
  </div>
</template>

<script>
import apptitle from "@/components/title";

export default {
  data() {
    return {
      defaultList: [
        {
          name: "a42bdcc1178e62b4694c830f028db5c0",
          url:
            "http://a0.att.hudong.com/64/76/20300001349415131407760417677.jpg"
        },
        {
          name: "bc7521e033abdd1e92222d733590f104",
          url:
            "http://a0.att.hudong.com/64/76/20300001349415131407760417677.jpg"
        }
      ],
      imgName: "",
      visible: false,
      uploadList: [],
      formItem: {
        input: "",
        select: "",
        radio: "male",
        checkbox: [],
        switch: true,
        date: "",
        time: "",
        slider: [20, 50],
        textarea: ""
      },
      value1: [],
      data: [
        {
          value: "beijing",
          label: "北京",
          children: [
            {
              value: "gugong",
              label: "故宫"
            },
            {
              value: "tiantan",
              label: "天坛"
            },
            {
              value: "wangfujing",
              label: "王府井"
            }
          ]
        },
        {
          value: "jiangsu",
          label: "江苏",
          children: [
            {
              value: "nanjing",
              label: "南京",
              children: [
                {
                  value: "fuzimiao",
                  label: "夫子庙"
                }
              ]
            },
            {
              value: "suzhou",
              label: "苏州",
              children: [
                {
                  value: "zhuozhengyuan",
                  label: "拙政园"
                },
                {
                  value: "shizilin",
                  label: "狮子林"
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    save() {},
    handleView(name) {
      this.imgName = name;
      this.visible = true;
    },
    handleRemove(file) {
      const fileList = this.$refs.upload.fileList;
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
    },
    handleSuccess(res, file) {
      file.url =
        "https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar";
      file.name = "7eb99afb9d5f317c912f08b5212fd69a";
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "The file format is incorrect",
        desc:
          "File format of " +
          file.name +
          " is incorrect, please select jpg or png."
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: "Exceeding file size limit",
        desc: "File  " + file.name + " is too large, no more than 2M."
      });
    },
    handleBeforeUpload() {
      const check = this.uploadList.length < 5;
      if (!check) {
        this.$Notice.warning({
          title: "Up to five pictures can be uploaded."
        });
      }
      return check;
    }
  },
  mounted() {
    this.uploadList = this.$refs.upload.fileList;
  },
  components: {
    apptitle
  }
};
</script>

<style>
</style>